<template>
  <div class="index-carousel" >
    <el-carousel height="500px" style="width: 100%">
      <el-carousel-item v-for="(image,index) in bgImageList" :key="index">
        <el-image :src="image.image" style="width: 100%;transform: translateY(-25%)" ></el-image>

      </el-carousel-item>
    </el-carousel>
    <div class="flex-row-center search-box">
      <el-input v-model="search" ></el-input>
      <button style="height: 40px;width: 40px;border-radius: 5px;background-color: gold">
        <i class="el-icon-search"></i>
      </button>
    </div>

    <trans-button class="get-more-btn">了解更多</trans-button>

  </div>
</template>

<script>
import TransButton from "@/components/button/TransButton.vue";

export default {
  name: "IndexCarousel",
  components: {TransButton},
  data() {
    return {
      search:"",
      bgImageList:[
        {
          image:"https://cdn.student.com/stumedia/sites/3/2018/04/%E5%85%AD%E6%9C%88%E4%BC%A6%E6%95%A6%E5%AE%98%E7%BD%91banner-1660-1004.jpg",
        },
        {
          image:"https://cdn.student.com/stumedia/sites/3/2018/04/%E5%85%AD%E6%9C%88%E9%A5%AD%E5%9B%A2%E5%A4%96%E5%8D%96%E5%AE%98%E7%BD%91banner-1660-10041.jpg"

        } ,
        {
          image:"https://cdn.student.com/stumedia/sites/3/2018/04/%E5%AD%A6%E6%97%85%E5%AE%B62.0%E5%9B%9B%E6%9C%88%E5%AE%98%E7%BD%91banner-1660-1004.jpg"
        }
      ],
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
.index-carousel{
  width: 100%;
  position: relative;

  .search-box{
    position: absolute;
    bottom: 50px;
    left: 450px;
    z-index: 9;
    width: 600px;
    button{
      width: 40px;
      height: 40px;
      background-color: gold;
      cursor: pointer;
      outline: none;
      border-radius: 5px;
      border: 0;
      margin-left: 5px;
    }
  }
  .get-more-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    caret-color: transparent;
    transform: translateX(-50%);
    cursor: pointer;
    width: 200px;
    height: 50px;
  }
}
</style>